<template>
  <button :class="buttonClass">
    <slot></slot>
  </button>
</template>

<script setup>
import { computed } from 'vue';
import { css } from '@emotion/css';

const props = defineProps({
  variant: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'danger', 'warning', 'success'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  rounded: {
    type: Boolean,
    default: false
  }
});

// 使用Emotion创建动态CSS类
const buttonClass = computed(() => {
  return css`
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    &:active {
      transform: translateY(0);
    }

    ${props.size === 'small' && `
      padding: 6px 12px;
      font-size: 12px;
    `}

    ${props.size === 'medium' && `
      padding: 8px 16px;
      font-size: 14px;
    `}

    ${props.size === 'large' && `
      padding: 12px 24px;
      font-size: 16px;
    `}

    ${props.variant === 'primary' && `
      background-color: var(--primary);
      color: white;
    `}

    ${props.variant === 'secondary' && `
      background-color: var(--secondary);
      color: white;
    `}

    ${props.variant === 'danger' && `
      background-color: var(--danger);
      color: white;
    `}

    ${props.variant === 'warning' && `
      background-color: var(--warning);
      color: black;
    `}

    ${props.variant === 'success' && `
      background-color: var(--success);
      color: white;
    `}

    ${props.rounded && `
      border-radius: 50px;
    `}

    ${!props.rounded && `
      border-radius: var(--border-radius);
    `}
  `;
});
</script>
